<template>
  <div class="app-container">
    <div class="mainbox">
      <div class="filter-container">
        <el-form ref="filterFormRef" :inline="true" :model="filterForm"
                 @submit.native.prevent>
          <el-form-item label="企业名称" prop="enterpriseName">
            <el-input v-model.trim="filterForm.enterpriseName" placeholder="请输入企业名称">
            </el-input>
          </el-form-item>
        </el-form>
        <div class="flex-1" />
        <el-button type="primary" @click="handleFilter">搜索</el-button>
        <el-button @click="handleReset">重置</el-button>
      </div>
      <dt-table
        ref="dtTable"
        v-loading="loading"
        :table-opts="tableOpts"
        row-key="id"
        :pagination-data="{
          total: total,
          queryParams: filterForm
        }"
        @pagination="getList"
      >
      </dt-table>
    </div>
    <dtDialog
      title="新增企业信息"
      :visible.sync="dialogVisible"
      :lock-scroll="false"
      :append-to-body="true"
      :is-loading="formLoading"
      @closeDialog="onModalClosed"
      @comfirmBtn="onSubmit()"
    >
      <el-form
        ref="form"
        slot="content"
        label-width="130px"
        :model="form"
        :rules="rules"
      >
        <el-form-item label="企业名称" prop="enterpriseName">
          <el-input
            v-model.trim="form.enterpriseName"
            maxlength="30"
            placeholder="请输入企业名称"
            show-word-limit
            class="limit"
          />
        </el-form-item>
      </el-form>
    </dtDialog>
    <informationTableModel ref="informationTableModel" />
    <informationFormModel ref="informationFormModel" />
  </div>
</template>

<script>
import informationTableModel from './components/informationTableModel'
import informationFormModel from './components/informationFormModel'
import { addEnterprise, getSupplyBasePage } from '@/api/information/index'

export default {
  components: { informationTableModel, informationFormModel },
  data() {
    return {
      filterForm: {
        enterpriseName: '',
        pageNo: 1,
        pageSize: 10
      },
      total: 0,
      loading: false,
      tableOpts: {
        rowKey: 'id',
        toolbarBtn: [
          {
            label: '新增企业',
            permission: ['INFORMATION_SERVICE_ADD_BUTTON'],
            type: 'primary',
            icon: 'el-icon-plus',
            click: () => {
              this.handleAdd()
            }
          }
        ],
        tableData: [],
        firstTableCol: {
          select: false
        },
        indexTableCol: {
          index: true
        },
        tableCol: [
          {
            prop: 'enterpriseName',
            label: '企业名称',
            show: true
          },
          {
            prop: 'socialCreditCode',
            label: '统一社会信用代码',
            show: true
          },
          {
            prop: 'taxCode',
            label: '税务登记号',
            show: true
          },
          {
            prop: 'establishDate',
            label: '成立时间',
            show: true
          }
        ],
        operator: {
          width: 292,
          operatorBtn: [
            {
              text: '认证系统详情',
              // permission: ['BRANDMAINTENANCE_UPDATE_BUTTON'],
              size: 'small',
              click: (row, col, cellValue) => { return this.detailView(row) }
            },
            {
              text: '新增认证',
              permission: ['INFORMATION_SERVICE_ADD_AUTH_BUTTON'],
              size: 'small',
              click: (row, col, cellValue) => { return this.addAuthentication(row) }
            }
          ]
        }
      },
      form: {
        enterpriseName: ''
      },
      rules: {
        enterpriseName: [{ required: true, message: '请输入企业名称', trigger: ['blur'] }]
      },
      dialogVisible: false,
      formLoading: false
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    addAuthentication(row) {
      this.$refs.informationFormModel.open(row)
    },
    detailView(row) {
      this.$refs.informationTableModel.open(row.enterpriseId)
    },
    handleAdd() {
      this.dialogVisible = true
    },
    // 搜索
    handleFilter() {
      this.filterForm.pageNo = 1
      this.getList()
    },
    // 重置
    handleReset() {
      this.$refs.filterFormRef.resetFields('filterForm')
      this.handleFilter()
    },
    getList() {
      this.loading = true
      getSupplyBasePage(this.filterForm).then((res) => {
        this.loading = false
        this.tableOpts.tableData = res.data.rows
        this.total = res.data.totalRows
      }).catch(() => {
        this.loading = false
      })
    },
    onSubmit() {
      this.$refs.form.validate((result, message) => {
        if (result) {
          this.formLoading = true
          addEnterprise(this.form).then((res) => {
            this.dialogVisible = false
            this.$message.success(res.message)
            this.getList()
          }).finally(() => {
            this.formLoading = false
          })
        }
      })
    },
    onModalClosed() {
      this.initModal()
    },
    initModal() {
      this.$refs.form.resetFields()
      this.form = { enterpriseName: '' }
    }
  }
}
</script>

<style>

</style>
